<template>
  <div class="salary-content">
    <!-- 头部搜索框 -->
    <div class="find">
      <el-form :inline="true" :model="input" class="input">
        <el-form-item label="姓名:">
          <el-input v-model="input.input1" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="职位:">
          <el-input v-model="input.input2" placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="input.input3" placeholder="请输入部门"></el-input>
        </el-form-item>
        <el-form-item label="薪资日期:">
          <el-date-picker
            v-model="input.salaryData"
            type="date"
            format
            placeholder="选择日期"
            @change="onDate"
            value-format="yyyy-MM"
            >
          </el-date-picker>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search el-icon--right" class="find-button">查询</el-button>
        </el-form-item>
        <!-- 查询结束 -->
        <!-- 新增 -->
        <el-form-item>
          <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus el-icon--right" class="find-button">新增</el-button>
          <!-- 新增后弹框 -->
          <el-dialog title="新增员工工资信息" :visible.sync="dialogFormVisible" width="1200px" lock-scroll>
            <div class="form" style="height:600px;overflow:scroll;overflow-x:hidden;">
              <el-form :model="form" :rules="rules" ref="form" label-width="170px"  class="demo-ruleForm" size="mini">
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="职位：" prop="job">
                <el-select v-model="form.job" placeholder="请选择职位">
                  <el-option label="前端开发" value="前端开发"></el-option>
                  <el-option label="后端开发" value="后端开发"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门：" prop="department">
                <el-select v-model="form.department" placeholder="请选择部门">
                  <el-option label="人事" value="人事"></el-option>
                  <el-option label="财务" value="财务"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="身份证号：" prop="ID">
                <el-input v-model="form.ID" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="入职日期：" prop="entryDate" required>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.entryDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="转正日期：" prop="activeDate" required>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.activeDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="基本工资：" prop="baseSalary">
                <el-input v-model="form.baseSalary" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="绩效考核：" prop="kpi">
                <el-input v-model="form.kpi" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="岗位补贴：" prop="allowance">
                <el-input v-model="form.allowance" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="缺勤扣款(扣款项)：" prop="absenceCut">
                <el-input v-model="form.absenceCut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="迟到扣款(扣款项)：" prop="lateCut">
                <el-input v-model="form.lateCut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="早退扣款(扣款项)：" prop="leaveCut">
                <el-input v-model="form.leaveCut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="其他扣款(扣款项)：" prop="otherCut">
                <el-input v-model="form.otherCut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="补发：" prop="backpay">
                <el-input v-model="form.backpay" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="加班工资：" prop="overtimePayment">
                <el-input v-model="form.overtimePayment" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="餐费补贴：" prop="mealAllowance">
                <el-input v-model="form.mealAllowance" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="加班补贴：" prop="overtimeAllowance">
                <el-input v-model="form.overtimeAllowance" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="优秀员工奖金：" prop="outstandingBonus">
                <el-input v-model="form.outstandingBonus" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="异动：" prop="changes">
                <el-input v-model="form.changes" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="应发工资：" prop="shouldPayment">
                <el-input v-model="form.shouldPayment" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="养老(个人社扣)：" prop="individual_yanglao_cut">
                <el-input v-model="form.individual_yanglao_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="医疗(个人社扣)：" prop="individual_medical_cut">
                <el-input v-model="form.individual_medical_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="失业(个人社扣)：" prop="individual_unemployed_cut">
                <el-input v-model="form.individual_unemployed_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="个人社扣合计扣款：" prop="individual_sb_total">
                <el-input v-model="form.individual_sb_total" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="个人公积金扣款：" prop="individual_ggj_cut">
                <el-input v-model="form.individual_ggj_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="税后扣款个人所得税：" prop="individualTax">
                <el-input v-model="form.individualTax" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="已发：" prop="alreadyPayment">
                <el-input v-model="form.alreadyPayment" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="实发：" prop="realityPayment">
                <el-input v-model="form.realityPayment" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="养老(公司社扣)：" prop="company_yanglao_cut">
                <el-input v-model="form.company_yanglao_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="医疗(公司社扣)：" prop="company_medical_cut">
                <el-input v-model="form.company_medical_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="大病险(公司社扣)：" prop="company_insurance_cut">
                <el-input v-model="form.company_insurance_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="失业(公司社扣)：" prop="company_unemployed_cut">
                <el-input v-model="form.company_unemployed_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工伤(公司社扣)：" prop="company_hurt_cut">
                <el-input v-model="form.company_hurt_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="公司社保合计扣款：" prop="company_sb_total">
                <el-input v-model="form.company_sb_total" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="公积金单位承包部分：" prop="company_gjj_cut">
                <el-input v-model="form.company_gjj_cut" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话：" prop="tel">
                <el-input v-model="form.tel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工资卡号：" prop="pay_card_num">
                <el-input v-model="form.pay_card_num" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注1：" prop="mark1">
                <el-input v-model="form.mark1" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注2：" prop="mark2">
                <el-input v-model="form.mark2" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注3：" prop="mark3">
                <el-input v-model="form.mark3" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="创建人：" prop="creater">
                <el-input v-model="form.creater" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="创建时间：" prop="create_time" required>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.create_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="更新人：" prop="updater">
                <el-input v-model="form.updater" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="更新时间：" prop="update_time" required>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.update_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item style="float:right;margin-right:80px;margin-bottom:10px">
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
              </el-form-item>
              </el-form>
            </div>
          </el-dialog>
          <!-- 弹框结束 -->
        </el-form-item>
        <!-- 新增结束 -->
        <!-- 上传 -->
        <el-form-item>
          <el-button type="primary" @click="dialogImportVisible = true" icon="el-icon-upload el-icon--right" class="find-button">上传</el-button>
            <el-dialog
              title="上传"
              :visible.sync="dialogImportVisible"
              width="30%"
              :before-close="handleClose">
              <el-upload
                class="upload-demo"
                action="#"
                accept=".xls, .xlsx"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
                :on-change="handleChange"
                show-file-list
                :limit="2"
                :file-list="fileList">
                <el-button type="primary"  @click="onUpload" class="find-button" icon="el-icon-plus el-icon--right">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
              </el-upload>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogImportVisible = false">确 定</el-button>
              </span>
            </el-dialog>
        </el-form-item>
        <!-- 上传结束 -->
        <!-- 下载 -->
        <el-form-item>
          <el-button type="primary" @click="onDownload" icon="el-icon-download el-icon--right" class="find-button">下载</el-button>
        </el-form-item>
        <!-- 下载结束 -->
      </el-form>
    </div>
    <!-- 头部搜索框结束 -->
    <hr style="height:1px;border:none;border-top:1px solid #c0c4cc;">
    <!-- table 表格内容 -->
    <div class="table-salary">
      <h3 style="margin-bottom: 20px">薪资日期 : {{salary_date}}</h3>
      <el-table
        :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
        fit
        border
        height="560"
        style="width: 100%">
        <el-table-column
          align="center"
          fixed="left"
          type="index"
          label="序号"
          width="50"
          >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="left"
          prop="name"
          label="姓名"
          >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="left"
          prop="job"
          label="职位"
          width="120"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="department"
          label="部门"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="ID"
          label="身份证号"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="entryDate"
          label="入职日期"
          width="100"
          value-format="yyyy-MM-dd"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="activeDate"
          label="转正日期"
          width="100"
          value-format="yyyy-MM-dd"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="baseSalary"
          label="基本工资"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="kpi"
          label="绩效考核"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="allowance"
          label="岗位补贴"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="absenceCut"
          label="缺勤扣款(扣款项)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="lateCut"
          label="迟到扣款(扣款项)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="leaveCut"
          label="早退扣款(扣款项)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="otherCut"
          label="其他扣款(扣款项)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="backpay"
          label="补发"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="overtimePayment"
          label="加班工资"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="mealAllowance"
          label="餐费补贴"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="overtimeAllowance"
          label="加班补贴"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="outstandingBonus"
          label="优秀员工奖金"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="changes"
          label="异动"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="shouldPayment"
          label="应发工资"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individual_yanglao_cut"
          label="养老(个人社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individual_medical_cut"
          label="医疗(个人社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individual_unemployed_cut"
          label="失业(个人社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individual_sb_total"
          label="个人社扣合计扣款"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individual_ggj_cut"
          label="个人公积金扣款"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="individualTax"
          label="税后扣款个人所得税"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="alreadyPayment"
          label="已发"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="realityPayment"
          label="实发"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_yanglao_cut"
          label="养老(公司社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_medical_cut"
          label="医疗(公司社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_insurance_cut"
          label="大病险(公司社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_unemployed_cut"
          label="失业(公司社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_hurt_cut"
          label="工伤(公司社扣)"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_sb_total"
          label="公司社保合计扣款"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="company_gjj_cut"
          label="公积金单位承包部分"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="tel"
          label="电话"
          width="120"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pay_card_num"
          label="工资卡号"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="mark1"
          label="备注1"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="mark2"
          label="备注2"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="mark3"
          label="备注3"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="creater"
          label="创建人"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="创建时间"
          width="100"
          value-format="yyyy-MM-dd"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="updater"
          label="更新人"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="update_time"
          label="更新时间"
          width="100"
          value-format="yyyy-MM-dd"
          >
        </el-table-column>

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="200"
          >
          <template slot-scope="scope">
            <el-button type="primary" @click="dialogVisible = true, edit(scope)" size="small" style="margin-right:3px">编辑</el-button>
            <!-- 点击编辑后弹框 -->
            <el-dialog title="编辑员工工资信息" :visible.sync="dialogVisible" :append-to-body="true" width="1200px" lock-scroll>
              <div class="edit" style="height:600px;overflow:scroll;overflow-x:hidden;">
                <el-form :model="form1" :rules="rules" ref="form1" label-width="180px"  class="demo-ruleForm" size="mini">
                  <el-form-item label="姓名：" prop="name">
                    <el-input v-model="form1.name" autocomplete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="职位：" prop="job">
                    <el-select v-model="form1.job" placeholder="请选择职位">
                      <el-option label="前端开发" value="前端开发"></el-option>
                      <el-option label="后端开发" value="后端开发"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="部门：" prop="department">
                    <el-select v-model="form1.department" placeholder="请选择部门">
                      <el-option label="人事" value="人事"></el-option>
                      <el-option label="财务" value="财务"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="身份证号：" prop="ID" disabled>
                    <el-input v-model="form1.ID" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="入职日期：" prop="entryDate" required disabled>
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form1.entryDate" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="转正日期："  prop="activeDate" required disabled>
                    <el-col :span="11">
                      <el-date-picker type="date"  placeholder="选择日期" v-model="form1.activeDate" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="基本工资：" prop="baseSalary">
                    <el-input v-model="form1.baseSalary" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="绩效考核：" prop="kpi">
                    <el-input v-model="form1.kpi" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="岗位补贴：" prop="allowance">
                    <el-input v-model="form1.allowance" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="缺勤扣款(扣款项)：" prop="absenceCut">
                    <el-input v-model="form1.absenceCut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="迟到扣款(扣款项)：" prop="lateCut">
                    <el-input v-model="form1.lateCut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="早退扣款(扣款项)：" prop="leaveCut">
                    <el-input v-model="form1.leaveCut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="其他扣款(扣款项)：" prop="otherCut">
                    <el-input v-model="form1.otherCut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="补发：" prop="backpay">
                    <el-input v-model="form1.backpay" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="加班工资：" prop="overtimePayment">
                    <el-input v-model="form1.overtimePayment" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="餐费补贴：" prop="mealAllowance">
                    <el-input v-model="form1.mealAllowance" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="加班补贴：" prop="overtimeAllowance">
                    <el-input v-model="form1.overtimeAllowance" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="优秀员工奖金：" prop="outstandingBonus">
                    <el-input v-model="form1.outstandingBonus" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="异动：" prop="changes">
                    <el-input v-model="form1.changes" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="应发工资：" prop="shouldPayment">
                    <el-input v-model="form1.shouldPayment" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="养老(个人社扣)：" prop="individual_yanglao_cut">
                    <el-input v-model="form1.individual_yanglao_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="医疗(个人社扣)：" prop="individual_medical_cut">
                    <el-input v-model="form1.individual_medical_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="失业(个人社扣)：" prop="individual_unemployed_cut">
                    <el-input v-model="form1.individual_unemployed_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="个人社扣合计扣款：" prop="individual_sb_total">
                    <el-input v-model="form1.individual_sb_total" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="个人公积金扣款：" prop="individual_ggj_cut">
                    <el-input v-model="form1.individual_ggj_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="税后扣款个人所得税：" prop="individualTax">
                    <el-input v-model="form1.individualTax" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="已发：" prop="alreadyPayment">
                    <el-input v-model="form1.alreadyPayment" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="实发：" prop="realityPayment">
                    <el-input v-model="form1.realityPayment" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="养老(公司社扣)：" prop="company_yanglao_cut">
                    <el-input v-model="form1.company_yanglao_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="医疗(公司社扣)：" prop="company_medical_cut">
                    <el-input v-model="form1.company_medical_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="大病险(公司社扣)：" prop="company_insurance_cut">
                    <el-input v-model="form1.company_insurance_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="失业(公司社扣)：" prop="company_unemployed_cut">
                    <el-input v-model="form1.company_unemployed_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="工伤(公司社扣)：" prop="company_hurt_cut">
                    <el-input v-model="form1.company_hurt_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司社保合计扣款：" prop="company_sb_total">
                    <el-input v-model="form1.company_sb_total" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公积金单位承包部分：" prop="company_gjj_cut">
                    <el-input v-model="form1.company_gjj_cut" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话：" prop="tel">
                    <el-input v-model="form1.tel" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="工资卡号：" prop="pay_card_num">
                    <el-input v-model="form1.pay_card_num" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="备注1：" prop="mark1">
                    <el-input v-model="form1.mark1" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="备注2：" prop="mark2">
                    <el-input v-model="form1.mark2" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="备注3：" prop="mark3">
                    <el-input v-model="form1.mark3" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="创建人：" prop="creater">
                    <el-input v-model="form1.creater" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="创建时间：" prop="create_time" required>
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form1.create_time" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="更新人：" prop="updater">
                    <el-input v-model="form1.updater" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="更新时间：" prop="update_time" required> 
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form1.update_time" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                  </el-form-item>  
                  <el-form-item style="float:right;margin-right:80px;margin-bottom:10px">
                    <el-button type="primary" @click="submitEditForm()">保存</el-button>
                    <el-button @click="resetEditForm('form1')">重置</el-button>
                  </el-form-item>
                </el-form> 
              </div>
            </el-dialog>
            <!-- 弹框结束 -->
            <el-button @click="deleteForm(scope)" :append-to-body="true" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 底部 分页 -->
    <div class="footer">
      <div class="page">
        <el-pagination
          :page-size="pageSize"
          :page-sizes="[5,10,20]"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="upChange"
          @next-click="nextChange"
          >
        </el-pagination>
      </div>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
// 导入下载所需文件
import {xlsx} from '../excel/xlsx'
  export default {
     methods: {
      // 显示时间方法
      onDate(date){
        // var time = new Date(date);
        // var y = time.getFullYear();
        // var m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        // date = y + '-' + m
        // console.log(date);
        this.salary_date = date
      },
      // 查询按钮
      onSubmit() {
        console.log('submit!');
      },
      // 新增按钮
      submitForm(formName) {
        var form = this.form
        console.log(form);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('创建成功!');
            this.tableData.push(form);
            this.dialogFormVisible = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 重置按钮
      resetForm(formName) {
          this.$refs[formName].resetFields();
      },
      // 上传按钮
      onUpload() {
        console.log('onUpload!');
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleChange(file,fileList){
        console.log(file);
        console.log(file.name);
        // 本地服务器路径
			  console.log(URL.createObjectURL(file.raw));
			  // 本地电脑路径
			  console.log(document.getElementsByClassName("el-upload__input")[0].value);
        var f = {}
        f.name = file.name
        f.url = document.getElementsByClassName("el-upload__input")[0].value
        this.fileList.push(f)
      },
      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
        console.log(file);
      },
      // 文件超出个数限制时的钩子
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 下载按钮
      onDownload() {
        xlsx(this.tableData,this.listHander,'员工工资情况')
      },
      // 分页功能
      // 分页处理
      //改变每页显示的数量
      handleSizeChange(val) {
        console.log(`每页${val}条`);
        this.pageSize = val;
        this.currentPage = 1;
      },
      //更改页码
      handleCurrentChange(val) {
        console.log(`当前页${val}条`);
        this.currentPage = val;
      },
      //上一页
      upChange(val) {
        console.log(val);
        this.currentPage -= 1; //动态改变
      },
      //下一页
      nextChange(val) {
        this.currentPage += 1; //动态改变
      },
      // 分页结束

      // 编辑按钮
      edit(scope){
        this.form1 = scope.row;
      },
      // 编辑后的保存按钮和编辑按钮
      submitEditForm(){
        this.dialogVisible = false;
      },
      // 重置按钮
      resetEditForm(formName) {
          this.$refs[formName].resetFields();
      },
      // 删除按钮
      deleteForm(scope){
        console.log(scope.row.ID);
        this.$confirm('此操作将删除该员工工资信息, 是否继续?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData = this.tableData.filter((item) =>{
            return item.ID != scope.row.ID
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },

    data() {
      return {
        // 薪资日期：
        salary_date:'',
        // 搜索框数据
        input:{
          input1:'',
          input2:'',
          input3:'',
          salaryData:'',
        },
        // 新增按钮的数据
        dialogFormVisible: false,
        form: {
          name: '',
          job: '',
          department: '',
          ID: '',
          entryDate: '',
          activeDate:'',
          baseSalary:'',
          kpi:'',
          allowance:'',
          absenceCut:'',
          lateCut:'',
          leaveCut:'',
          otherCut:'',
          backpay:'',
          overtimePayment:'',
          mealAllowance:'',
          overtimeAllowance:'',
          outstandingBonus:'',
          changes:'',
          shouldPayment:'',
          individual_yanglao_cut:'',
          individual_medical_cut:'',
          individual_unemployed_cut:'',
          individual_sb_total:'',
          individual_ggj_cut:'',
          individualTax:'',
          alreadyPayment:'',
          realityPayment:'',
          company_yanglao_cut:'',
          company_medical_cut:'',
          company_insurance_cut:'',
          company_unemployed_cut:'',
          company_hurt_cut:'',
          company_sb_total:'',
          company_gjj_cut:'',
          tel:'',
          pay_card_num:'',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'', 
          create_time:'',
          updater:'',
          update_time:'',
        },
        // 验证规则
        rules: {
          name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
            { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
          ],
          job: [
            { required: true, message: '请选择员工职位', trigger: 'change' }
          ],
          department: [
            { required: true, message: '请选择员工部门', trigger: 'change' }
          ],
          ID: [
            { required: true, message: '请输入员工身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '请输入正确的身份证号', trigger: 'blur' }
          ],
          entryDate: [
            {  required: true, message: '请选择日期', trigger: 'change' },
          ],
          activeDate: [
            {  required: true, message: '请选择时间', trigger: 'change' }
          ],
          baseSalary: [
            {required: true, message: '请填入基本工资', trigger: 'blur' },
          ],
          shouldPayment: [
            {required: true, message: '请填入应发工资', trigger: 'blur' },
          ],
          individual_yanglao_cut: [
            {required: true, message: '请填入养老(个人社扣)', trigger: 'blur' },
          ],
          individual_medical_cut: [
            {required: true, message: '请填入医疗(个人社扣)', trigger: 'blur' },
          ],
          individual_unemployed_cut: [
            {required: true, message: '请填入失业(个人社扣)', trigger: 'blur' },
          ],
          individual_sb_total: [
            {required: true, message: '请填入个人社扣合计扣款', trigger: 'blur' },
          ],
          individual_ggj_cut: [
            {required: true, message: '请填入个人公积金扣款', trigger: 'blur' },
          ],
          individualTax: [
            {required: true, message: '请填入税后扣款个人所得税', trigger: 'blur' },
          ],
          alreadyPayment: [
            {required: true, message: '请填入已发工资', trigger: 'blur' },
          ],
          realityPayment: [
            {required: true, message: '请填入实发工资', trigger: 'blur' },
          ],
          company_yanglao_cut: [
            {required: true, message: '请填入养老(公司社扣)', trigger: 'blur' },
          ],
          company_medical_cut: [
            {required: true, message: '请填入医疗(公司社扣)', trigger: 'blur' },
          ],
          company_insurance_cut: [
            {required: true, message: '请填入大病险(公司社扣)', trigger: 'blur' },
          ],
          company_unemployed_cut: [
            {required: true, message: '请填入失业(公司社扣)', trigger: 'blur' },
          ],
          company_hurt_cut: [
            {required: true, message: '请填入工伤(公司社扣)', trigger: 'blur' },
          ],
          company_sb_total: [
            {required: true, message: '请填入公司社保合计扣款', trigger: 'blur' },
          ],
          company_gjj_cut: [
            {required: true, message: '请填入公积金单位承包部分', trigger: 'blur' },
          ],
          tel: [
            { required: true, message: '请输入员工手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
          ],
          pay_card_num: [
            { required: true, message: '请输入员工工资卡号', trigger: 'blur' },
          ],
          creater: [
            { required: true, message: '请输入创建人', trigger: 'blur' },
          ],
          create_time: [
            {  required: true, message: '请选择日期', trigger: 'change' }
          ],
          updater: [
            { required: true, message: '请输入更新人', trigger: 'blur' },
          ],
          update_time: [
            {  required: true, message: '请选择日期', trigger: 'change' }
          ],
        },
        // 导入数据
        dialogImportVisible:false,
        fileList:[],
        // 导出数据
        listHander:{
          name: '姓名',
          job: '职位',
          department: '部门',
          ID: '身份证号',
          entryDate: '入职日期',
          activeDate:'转正日期',
          baseSalary:'基本工资',
          kpi:'绩效考核',
          allowance:'岗位补贴',
          absenceCut:'缺勤扣款(扣款项)',
          lateCut:'迟到扣款(扣款项)',
          leaveCut:'早退扣款(扣款项)',
          otherCut:'其他扣款(扣款项)',
          backpay:'补发',
          overtimePayment:'加班工资',
          mealAllowance:'餐费补贴',
          overtimeAllowance:'加班补贴',
          outstandingBonus:'优秀员工奖金',
          changes:'异动',
          shouldPayment:'应发工资',
          individual_yanglao_cut:'养老(个人社扣)',
          individual_medical_cut:'医疗(个人社扣)',
          individual_unemployed_cut:'失业(个人社扣)',
          individual_sb_total:'个人社扣合计扣款',
          individual_ggj_cut:'个人公积金扣款',
          individualTax:'税后扣款个人所得税',
          alreadyPayment:'已发',
          realityPayment:'实发',
          company_yanglao_cut:'养老(公司社扣)',
          company_medical_cut:'医疗(公司社扣)',
          company_insurance_cut:'大病险(公司社扣)',
          company_unemployed_cut:'失业(公司社扣)',
          company_hurt_cut:'工伤(公司社扣)',
          company_sb_total:'公司社保合计扣款',
          company_gjj_cut:'公积金单位承包部分',
          tel:'电话',
          pay_card_num:'工资卡号',
          mark1:'备注1',
          mark2:'备注2',
          mark3:'备注3',
          creater:'创建人', 
          create_time:'创建时间',
          updater:'更新人',
          update_time:'更新时间',
        },
        // 编辑按钮的数据
        dialogVisible: false,
        form1:{
          name: '',
          job: '',
          department: '',
          ID: '',
          entryDate: '',
          activeDate:'',
          baseSalary:'',
          kpi:'',
          allowance:'',
          absenceCut:'',
          lateCut:'',
          leaveCut:'',
          otherCut:'',
          backpay:'',
          overtimePayment:'',
          mealAllowance:'',
          overtimeAllowance:'',
          outstandingBonus:'',
          changes:'',
          shouldPayment:'',
          individual_yanglao_cut:'',
          individual_medical_cut:'',
          individual_unemployed_cut:'',
          individual_sb_total:'',
          individual_ggj_cut:'',
          individualTax:'',
          alreadyPayment:'',
          realityPayment:'',
          company_yanglao_cut:'',
          company_medical_cut:'',
          company_insurance_cut:'',
          company_unemployed_cut:'',
          company_hurt_cut:'',
          company_sb_total:'',
          company_gjj_cut:'',
          tel:'',
          pay_card_num:'',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'', 
          create_time:'',
          updater:'',
          update_time:'',
        },
        // 删除按钮的数据
        
        // 分页数据
        pageSize: 5, // 一个的数据条数
        currentPage: 1, // 当前页从哪页开始
        total: 100, // 设置总数
        // 表格数据
        tableData: [{
          emp_id: '1',
          name: '王大虎',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050001',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '2',
          name: '王二虎',
          job: '后端开发人员',
          department: '朗驰科技',
          ID: '441323199506050002',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '3',
          name: '王三虎',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050003',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '4',
          name: '王四虎',
          job: '后端开发人员',
          department: '朗驰科技',
          ID: '441323199506050004',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '5',
          name: '王五虎',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050005',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '6',
          name: '王小六',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050006',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '7',
          name: '王七七',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050007',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '8',
          name: '王发发',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050008',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '9',
          name: '王九九',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050009',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },{
          emp_id: '10',
          name: '王时时',
          job: '前端开发人员',
          department: '朗驰科技',
          ID: '441323199506050010',
          entryDate: '2016-05-02',
          activeDate:'2016-08-02',
          baseSalary:'2000',
          kpi:'3000',
          allowance:'1000',
          absenceCut:'100',
          lateCut:'100',
          leaveCut:'100',
          otherCut:'0',
          backpay:'100',
          overtimePayment:'500',
          mealAllowance:'200',
          overtimeAllowance:'200',
          outstandingBonus:'500',
          changes:'',
          shouldPayment:'6000',
          individual_yanglao_cut:'100',
          individual_medical_cut:'100',
          individual_unemployed_cut:'100',
          individual_sb_total:'300',
          individual_ggj_cut:'200',
          individualTax:'20',
          alreadyPayment:'3000',
          realityPayment:'5000',
          company_yanglao_cut:'100',
          company_medical_cut:'100',
          company_insurance_cut:'100',
          company_unemployed_cut:'100',
          company_hurt_cut:'100',
          company_sb_total:'500',
          company_gjj_cut:'100',
          tel:'18033338888',
          pay_card_num:'6227 0024 7017 0278 192',
          mark1:'',
          mark2:'',
          mark3:'',
          creater:'朗驰', 
          create_time:'2022-11-11',
          updater:'朗驰',
          update_time:'2022-11-12',
        },], 
      }
    }
  }
</script>

<style lang="less" scoped>
.salary-content{
  height: 760px;
  padding: 20px;
  background-color: #ffffff;
}
// 新增弹框样式
.form{
  .el-form{
    .el-input{
      width: 200px;
      margin-right: 40px;
      margin-left: -80px;
    }
    .el-select{
      width: 200px;
      margin-right: 40px;
      margin-left: -80px;

    }
    .el-date-picker{
      width: 200px;
      margin-right: 40px;
      margin-left: -80px;

    } 
  }
}
// 新增弹框样式结束
// 编辑弹框样式
.edit{
  .el-form{
    .el-input{
      width: 200px;
    }
    .el-select{
      width: 200px;
    }
    .el-date-picker{
      width: 200px;
    } 
  }
}
// 编辑弹框样式结束
.table-salary{
  height: 610px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin: 10px;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
}

.find{
  margin-top: 20px;
}

.footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 10%;
    .el-pagination {
      position: absolute;
      box-sizing: border-box;
      padding-right: 40px;
      top: 20px;
      right: 0;
    }
  }

</style>